<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Elements | Morgan</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself.  Heading 1Heading 2Heading 3Heading 4">
<meta property="og:type" content="article">
<meta property="og:title" content="Elements">
<meta property="og:url" content="http://yoursite.com/2013/12/24/elements/index.html">
<meta property="og:site_name" content="Morgan">
<meta property="og:description" content="The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself.  Heading 1Heading 2Heading 3Heading 4">
<meta property="og:updated_time" content="2017-06-11T07:21:28.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Elements">
<meta name="twitter:description" content="The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself.  Heading 1Heading 2Heading 3Heading 4">
  
    <link rel="alternate" href="https://hpcslag.github.io/hexo-theme-morgan/demo/atom.xml" title="Morgan" type="application/atom+xml">
  
  
    <link rel="icon" href="https://hpcslag.github.io/hexo-theme-morgan/demo/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Profonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="https://hpcslag.github.io/hexo-theme-morgan/demo/css/tocas.css">
  <link rel="stylesheet" href="https://hpcslag.github.io/hexo-theme-morgan/demo/css/animate.css">
  <link rel="stylesheet" href="https://hpcslag.github.io/hexo-theme-morgan/demo/css/style.css">
  <style type="text/css">
    a.title-link:hover{
        color: #34b2db !important;
    }

    a.title-link:active{
        color: #2075c1 !important;
    }

    #menu-color-id{
        background : #f7f7f7;
    }

    #menu-color-id a{
        color: #5a5a5a;
    }
  </style>
  <script src="https://hpcslag.github.io/hexo-theme-morgan/demo/js/tocas.js"></script>
  

</head>

<body>
<!-- navigation -->

<div class="ts fluid basic link big menu" id="menu-color-id">

    <!-- ejs : align to post page or index page -->
        
            <div class="ts very narrow container">
        

        
            <a class="item" href="https://hpcslag.github.io/hexo-theme-morgan/demo/">Home</a>
        
            <a class="item" href="https://hpcslag.github.io/hexo-theme-morgan/demo/archives">Archives</a>
        
    </div>
</div>
<!-- the end of navigation -->

<!-- big bang title -->
<div class="ts padded horizontally fitted fluid slate" style="background-color: #f7f7f7;">
    <!-- ejs : align to post page or index page -->
    
        <div class="ts very narrow container">
    
        <!-- Title -->
        <h1 class="ts eleven wide column header be-center-h1">
            <span style="color: #404040;" id="big-title">Morgan</span>
            <div class="sub header" id="slogan-bar" style=" margin-top: 15px; color: #404040;"></div>
        </h1>
        <!-- the end of title -->
    </div>
</div>
<!-- the end of big bang title -->


<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Code+Procdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

<!-- main section -->
<div class="ts text container">
        <!-- left section -->
        <div class="column" style=" padding: 35px; ">
            <!-- Articles -->
                
                <h1 class="ts header">
                    <span style="color: #333;">Elements</span>
                    <div class="sub header" style="color: #808080;">Publish: 2013/11/24 
                    
                    </div>
                </h1>

                <p>The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself.</p>
<hr>
<h1 id="Heading-1"><a href="#Heading-1" class="headerlink" title="Heading 1"></a>Heading 1</h1><h2 id="Heading-2"><a href="#Heading-2" class="headerlink" title="Heading 2"></a>Heading 2</h2><h3 id="Heading-3"><a href="#Heading-3" class="headerlink" title="Heading 3"></a>Heading 3</h3><h4 id="Heading-4"><a href="#Heading-4" class="headerlink" title="Heading 4"></a>Heading 4</h4><h5 id="Heading-5"><a href="#Heading-5" class="headerlink" title="Heading 5"></a>Heading 5</h5><h6 id="Heading-6"><a href="#Heading-6" class="headerlink" title="Heading 6"></a>Heading 6</h6><hr>
<h2 id="Paragraph"><a href="#Paragraph" class="headerlink" title="Paragraph"></a>Paragraph</h2><p>Lorem ipsum dolor sit amet, <a href="">test link</a> consectetur adipiscing elit. <strong>Strong text</strong> pellentesque ligula commodo viverra vehicula. <em>Italic text</em> at ullamcorper enim. Morbi a euismod nibh. <u>Underline text</u> non elit nisl. <del>Deleted text</del> tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. <code>Sed erat diam</code>, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.</p>
<blockquote>
<p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
</blockquote>
<p>Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.</p>
<h2 id="List-Types"><a href="#List-Types" class="headerlink" title="List Types"></a>List Types</h2><h3 id="Definition-List-dl"><a href="#Definition-List-dl" class="headerlink" title="Definition List (dl)"></a>Definition List (dl)</h3><dl><dt>Definition List Title</dt><dd>This is a definition list division.</dd></dl>

<h3 id="Ordered-List-ol"><a href="#Ordered-List-ol" class="headerlink" title="Ordered List (ol)"></a>Ordered List (ol)</h3><ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<h3 id="Unordered-List-ul"><a href="#Unordered-List-ul" class="headerlink" title="Unordered List (ul)"></a>Unordered List (ul)</h3><ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h2 id="Table"><a href="#Table" class="headerlink" title="Table"></a>Table</h2><table>
<thead>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>
<h2 id="Misc-Stuff-abbr-acronym-sub-sup-etc"><a href="#Misc-Stuff-abbr-acronym-sub-sup-etc" class="headerlink" title="Misc Stuff - abbr, acronym, sub, sup, etc."></a>Misc Stuff - abbr, acronym, sub, sup, etc.</h2><p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>

            <!-- / the end of articles -->
        </div>
        <!-- / left section -->
        
        
            <hr/>
            <div id="disqus_thread" style=" margin-top: 15px; margin-bottom: 25px; "></div>
            <script>
                /**
                *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
                *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
                /*
                var disqus_config = function () {
                this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
                this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
                };
                */
                (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://morgan-hexo-theme.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
        

        <!-- Next Post and Prev Post -->
        
        <hr/>
        <div class="next-prev-post-section">
            
                <a href="https://hpcslag.github.io/hexo-theme-morgan/demo/2013/12/24/tags/" class="styled-border">
                    ←
                    Tags
                    
                </a>
            
            
                <a href="#"></a>
            
        </div>
        
</div>
<script type="text/javascript">
    let img = document.getElementsByTagName("img");
    for(let i = 0; i < img.length; i++){
        img[i].className += " ts fluid image";
    }
</script>
<!-- / main section -->

<!-- copyright -->
<div class="ts attached secondary segment">
    <div class="ts narrow container">
        <br>
        <div class="ts large center aligned header">
            Powered by Hexo, Theme designs by @hpcslag.
            <div class="smaller sub header">
                Style-Framework Tocas-UI designs by @yamioldmel 
            </div>
        </div>
        <br>
    </div>
</div>
<!-- / copyright -->
<script type="text/javascript">
    
    const slogans = ["Hallo, dit is mijn blog","嗨，這是我的博客!","안녕하세요, 제 블로그입니다.","Hi, This is my blog!","こんにちは、私のブログへようこそ!","مرحبا، مرحبا بك في مدونتي"];
</script>
<script src="https://hpcslag.github.io/hexo-theme-morgan/demo/js/script.js"></script>
</body>
</html>